<template>
  <el-container>
    <el-container>
      <el-aside width="18%">
        <LeftMenu />
      </el-aside>
      <el-container>
        <el-header style="height:65px;line-height:65px;">
          <div class="header" >
            <div class="logo">
              <div>
                <img src="../assets/images/JHHJ_sm.png" style="margin-left:30px" />
              </div>
              <div class="zjitc" @click="handleZJITC">
                <a href="https://www.zjitc.net" target="_blank">友情链接</a>
              </div>
              <div class="feedback">
                <span >问题反馈</span>
              </div>
            </div>
            <div class="avatar">
              <UserAvatar />
            </div>
          </div>
        </el-header>
        <el-main style="height:750px;background-color:#eeeeee;">
          <router-view :key="key"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script setup>
import LeftMenu from "./LeftMenu.vue";
import UserAvatar from "@/components/UserAvatar";
import { computed } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const key = computed(() => {
  return route.fullPath
})

</script>

<style lang="scss" scoped>
.header {
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.logo{
  width: 350px;
  display: flex;
  justify-content: space-between;
}
.feedback span{
  cursor: pointer;
}

.zjitc a{
  cursor: pointer;
  color: black;
}
a:link{
  text-decoration: none
}
a:hover{
  color:pink
}
.feedback:hover{
  color:pink;
  border-bottom: 2px solid pink;
}
.zjitc:hover{
  color:pink;
  border-bottom: 2px solid pink;
}
</style>